<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../../css/mui.poppicker.css" rel="stylesheet" />
	</head>
	<style>
		.mui-btn {
			font-size: 16px;
			padding: 8px;
			margin: 3px;
		}
		
		h5.mui-content-padded {
			margin-left: 3px;
			margin-top: 20px !important;
		}
		
		h5.mui-content-padded:first-child {
			margin-top: 12px !important;
		}
		
		.ui-alert {
			text-align: center;
			padding: 20px 10px;
			font-size: 16px;
		}
		
		#showUserPicker,
		#showCityPicker {
			display: none;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新增地址</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'></button>
				<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'></button>
				<label>选择地区</label>
				<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>选择（省/市/[区、县]）</button>
				<div id='cityResult3' class="ui-alert"></div>
				<label>详细地址</label>
				<div class="mui-input-row">
					<input id="xiangxi" type="text" class="mui-input-clear" placeholder="请您输入详细地址" maxlength="100">
				</div>
				<label>联系人电话</label>
				<div class="mui-input-row">
					<input id="lianxiren" type="text" class="mui-input-clear" placeholder="请您输入联系人电话" maxlength="15">
				</div>
				<label>收货人姓名</label>
				<div class="mui-input-row">
					<input id="shouhuorenxinming" type="text" class="mui-input-clear" placeholder="请您输入收货人姓名" maxlength="10">
				</div>
				<label>邮编</label>
				<div class="mui-input-row">
					<input id="postBox" type="number" class="mui-input-clear" placeholder="请您输入邮编">
				</div>
				<div class="mui-button-row">
					<button id="cancel" type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>&nbsp;&nbsp;
					<button id="dizhi" type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button>
				</div>
			</div>
			<span id="area" style="display: none;"></span>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script src="../../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/myjs/localVarchar.js"></script>
		<script src="../../../js/ipjs/ip.js"></script>
		<script src="../../../js/constatnt/var.js"></script>
		<script type="text/javascript">
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '',
						text: ''
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.innerText = JSON.stringify(items[0]);
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							cityResult3.innerText = "已选择:" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
							//返回 false 可以阻止选择框的关闭
							document.getElementById("area").innerHTML = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
						});
					}, false);
				});
			})(mui, document);
			document.getElementById("cancel").addEventListener('tap', function() {
				var btnArray = ['否', '是'];
				mui.confirm('确定取消？', '警告', btnArray, function(e) {
					if(e.index == 1) {
						location.reload();
					}
				})
			});
			document.getElementById("dizhi").addEventListener('tap', function() {
				var area = document.getElementById("area").innerHTML;
				var address = document.getElementById("xiangxi").value;
				var contact = document.getElementById("lianxiren").value;
				var nameForGoods = document.getElementById("shouhuorenxinming").value;
				var post = document.getElementById("postBox").value;
				var array = area.split(" ");
				var receivingAddress = {
					phone: localStorage.getItem(LOCAL_USER_INFO),
					province: array[0],
					city: array[1],
					county: array[2],
					detailed: address,
					postCode: post,
					receivingName: nameForGoods,
					receivingPhone: contact
				}
				var flag = true;
				if(area == "") {
					alert("你还未选择地区");
					flag = false;
					return;
				} else if(address === "") {
					alert("详细地址未填");
					flag = false;
					return;
				} else if(nameForGoods === "") {
					alert("收货人姓名未填");
					flag = false;
					return;
				} else if(contact === "") {
					alert("联系电话未填");
					flag = false;
					return;
				}else if(!istel(contact)){
					alert("电话格式不正确！");
					document.getElementById("lianxiren").value = "";
					flag = false;
				}
				if(flag) {
					mui.ajax(ip + '/address/insert', {
						data: JSON.stringify(receivingAddress),
						dataType: 'json',
						type: 'post',
						timeout: 10000,
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							status = data.data.code;
							desc = data.data.msg;
							//登陆状态判断
							if(status == OPERATION_SUCCESS) {
								alert(desc);
								window.location.reload();
							} else {
								plus.nativeUI.toast(desc);
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							mui.toast("系统异常！");
						}
					});
				}
			});
			function istel(tel) {
				var rtn = false;
				//移动号段
				var regtel = /^((13[4-9])|(15([0-2]|[7-9]))|(18[2|3|4|7|8])|(178)|(147))[\d]{8}$/;
				if(regtel.test(tel)) {
					rtn = true;
				}
				//电信号段
				regtel = /^((133)|(153)|(18[0|1|9])|(177))[\d]{8}$/;
				if(regtel.test(tel)) {
					rtn = true;
				}
				//联通号段
				regtel = /^((13[0-2])|(145)|(15[5-6])|(176)|(18[5-6]))[\d]{8}$/;
				if(regtel.test(tel)) {
					rtn = true;
				}
				return rtn;
			}
		</script>
	</body>

</html>